<template>
    <div>
        <Modal class="voyageNo-modal" width="750" v-model="voyageNoModal" :mask-closable="false">
            <div slot="header">
                查找货物运输批次号
            </div>
            <div class="modal-body">
                <Form ref="formInline" :model="formInline" inline :labelWidth="100" @submit.native.prevent>
                    <FormItem prop="dataCode" label="货物运输批次号">
                        <Row>
                            <Col span="20">
                            <Input v-model="formInline.voyageNo"></Input>
                            </Col>
                            <Col span="2">&nbsp;</Col>
                            <Col span="2">
                            <Button type="primary" @click="searchData">查询</Button>
                            </Col>
                        </Row>
                    </FormItem>
                </Form>
                <Table
                    border
                    height="200"
                    ref="selection"
                    :columns="columns"
                    :data="tableList"
                    :loading="loading"
                    :no-data-text="noDataText"
                    @on-selection-change="rowSelectChange"
                >
                </Table>
                <Pagination
                    style="margin-top: 10px;text-align:right;"
                    :pageSize.sync="formInline.pageSize"
                    :current.sync="formInline.pageNum"
                    :total="total"
                    @change="searchData"
                />
            </div>
            <div slot="footer">
                <Button type="primary" @click="confirmHandle">确定</Button>
                <Button @click="closeModal">取消</Button>
            </div>
        </Modal>
        <errorModal ref="errorModalRef" />
    </div>
</template>

<script>
import axios from '@/libs/api.request'
import { queryDeclare } from '@/api/manifest.js'
import errorModal from './errorModal'

export default {
    name: 'CargoBatchNoModal',
    components: {
        errorModal
    },
    data () {
        return {
            voyageNoModal: false,
            formInline: {
                voyageNo: '',
                pageNum: 1,
                pageSize: 10
            },
            total: 0,
            loading: false,
            tableList: [],
            selectedList: [],
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '航次号',
                    key: 'voyageNo',
                    width: 150,
                    align: 'center'
                },
                {
                    title: '报关单内部编号',
                    key: 'declareNo',
                    width: 150,
                    align: 'center'
                },
                {
                    title: '统一编号',
                    key: 'seqNo',
                    align: 'center'
                },
                {
                    title: '报关单状态',
                    key: 'businessStatus',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h(
                            'span',
                            this.statusList[params.row.businessStatus])
                    }
                }
            ],

            statusList: {
                'SC': '已生成报关单',
                '0': '发送单一窗口成功',
                '1': '发送单一窗口失败',
                '2': '单一窗口申报中',
                'P': '已放行',
                'R': '已结关'
            },
            type: '', // 类型 原始舱单:MT1401  预配舱单:MT2401

            noDataText: ''
        }
    },

    methods: {

        init (type, value, practicalTrainingId) {
            this.voyageNoModal = true
            this.type = type
            this.noDataText = '暂无数据'
            if (value && value !== this.formInline.voyageNo) {
                this.formInline.voyageNo = value
                this.searchData()
            }
            this.formInline.practicalTrainingId = practicalTrainingId
        },

        searchData () {
            if (!this.formInline.voyageNo) {
                this.$Message.error('请输入需要查找货物运输批次号')
                return false
            }
            this.tableList = []
            this.formInline.pageNum = 1
            this.formInline.manifestType = this.type
            this.loading = true
            queryDeclare(this.formInline).then(res => {
                if (res.data.success) {
                    let list = res.data.data.list
                    if (list.length > 0) {
                        this.tableList = list
                    } else {
                        this.noDataText = '没有查询结果，请到通关管理中确认报关单！'
                    }
                    this.total = res.data.data.total
                } else {
                    this.$Message.error(res.data.msg)
                }
                this.loading = false
            })
        },

        rowSelectChange (selection, row) {
            this.selectedList = selection
        },

        confirmHandle () {
            let list = this.selectedList
            if (list.length === 0) {
                this.$Message.warning('请选择货物运输批次号')
                return false
            }
            axios.request({
                url: '/ui/customs/declare/createManifest',
                params: {
                    practicalTrainingId: this.formInline.practicalTrainingId,
                    declareIds: list.map(item => item.declareId).join(',')
                },
                method: 'get'
            }).then(res => {
                if (res.data.success) {
                    let obj = {
                        manifestId: res.data.data,
                        cargoBatchNo: this.formInline.voyageNo
                    }
                    this.$emit('queryManifest', obj)
                    this.closeModal()
                } else {
                    this.$refs.errorModalRef.init(res.data.msg)
                }
            })
        },

        closeModal () {
            this.voyageNoModal = false
        }
    }
}
</script>

<style lang="less">
    .voyageNo-modal {
        .btn-box {
            button {
                margin-right: 15px;
            }
            margin-bottom: 15px;
        }

    }

</style>
